<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-cn">
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <title>字段管理</title>

    <link rel="stylesheet" type="text/css" href="/src/css/themes/default.css"/>
    <!-- iview样式 -->
    <link rel="stylesheet" type="text/css" href="/plugins/iview/css/iview.css"/>
    <!--@import url("//unpkg.com/iview/dist/styles/iview.css");-->
    <!--<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>-->
    <!-- 引入layui样式 -->
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/plugins/popover/popover.css">
    <!--   <script src="//unpkg.com/vue/dist/vue.js"></script>
       <script src="//unpkg.com/iview/dist/iview.min.js"></script>-->
    <!-- 引入vue -->
    <script type="text/javascript" src="/plugins/vue/vue.min.js"></script>
    <!-- iview js -->
    <script type="text/javascript" src="/plugins/iview/js/iview.js"></script>
    <script src="/properties/config.js"></script>
    <!--引入layui.js-->
    <script src="/plugins/layui/layui.js"></script>
    <!--引入axios.js 用于ajax调用-->
    <script src="/plugins/axios/axios.min.js"></script>
    <script type="text/javascript" src="/plugins/jquery-1.9.1.min.js"></script>
    <script src="/build/js/appToken.js"></script>
    <script src="/plugins/popover/popover.js"></script>
    <script src="/src/js/wangEditor.js"></script>
</head>
<body>
<!--隐藏元素-->
<!--<p id="staffType"  th:attr="value=${staffType}"  hidden />-->
<!--使用v-cloak技术，在vue渲染完毕前隐藏页面，渲染完成后显示-->
<div id="app" v-cloak>


    <!-- 搜索工具框 开始-->
    <row style="padding: 10px">
        <i-col span="24">
            <Card>
                <p slot="title">
                    <Icon type="ios-search"></Icon>
                    查询条件
                </p>

                <!--右上侧按钮列表-->
                <i-button slot="extra" type="info" :loading="loading" icon="ios-search" @click="toLoading"
                          style="margin-right:10px">
                    <span v-if="!loading">查询</span>
                    <span v-else>查询中...</span>
                </i-button>
                <i-button slot="extra" type="info" icon="ios-plus-empty" @click="addRecruit"
                          style="margin-right:10px">
                    <span>新增</span>
                </i-button>
                <!--查询表单内容-->
                <row :gutter="16">
                    <i-form ref="searchForm" :model="searchForm" label-position="right" :label-width="100">
                        <i-col span="8">
                            <form-item label="招聘类别：" prop="typeId">
                                <i-select v-model="searchForm.typeId" filterable style="width: 176px">
                                    <i-option value="">全部</i-option>
                                    <i-option value="1">技术</i-option>
                                    <i-option value="2">职能</i-option>
                                    <i-option value="3">业务</i-option>
                                    <i-option value="4">其它</i-option>
                                </i-select>
                            </form-item>
                        </i-col>
                        <i-col span="8">
                            <form-item label="岗位名称：" prop="stationName">
                                <i-input v-model="searchForm.stationName" placeholder="岗位名称" maxlength="30"
                                         style="width: 176px"></i-input>
                            </form-item>
                        </i-col>
                        <i-col span="8">
                            <form-item label="工作地点：" prop="stationPlace">
                                <i-input v-model="searchForm.stationPlace" placeholder="工作地点" maxlength="30"
                                         style="width: 176px"></i-input>
                            </form-item>
                        </i-col>
                        <i-col span="16">
                            <form-item label="生效时间：" prop="endTime">
                                <date-picker type="date"  @on-change="getStartTime"
                                             placeholder="选择日期"
                                             format="yyyy-MM-dd"
                                             style="width: 200px"></date-picker>
                                <span>至</span>
                                <date-picker type="date"  @on-change="getEndTime"
                                             placeholder="选择日期"
                                             format="yyyy-MM-dd"
                                             style="width: 200px"></date-picker>
                                </span>
                            </form-item>
                        </i-col>
                        <i-col span="8">
                            <form-item label="状态：" prop="state">
                                <i-select v-model="searchForm.state" filterable style="width: 176px">
                                    <i-option value="">全部</i-option>
                                    <i-option value="0">启用</i-option>
                                    <i-option value="1">停用</i-option>
                                </i-select>
                            </form-item>
                        </i-col>
                    </i-form>
                </row>

            </Card>
        </i-col>
    </row>

    <!-- 搜索工具框 结束-->
    <!-- 表单Grid，使用layerUI的表格组件 开始 -->
    <row style="padding: 10px">
        <i-col span="24">
            <!-- 使用方法渲染模式 -->
            <table id="listTable" lay-filter="listTable" class="layui-hide"></table>
            <script type="text/html" id="barTools">
                <a class="layui-btn layui-btn-normal layui-btn-xs " lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs " lay-event="view">预览</a>
            </script>
        </i-col>
    </row>
    <!-- 表单Grid，使用layerUI的表格组件 结束 -->
    <!--导出Excel隐藏表单-->
    <iframe id="frame" name="iframe" style="display:none;"></iframe>
    <!--导出Excel隐藏表单-->
</div>

<script type="text/html" id="recruitstate">
    {{#  if(d.state == 0){ }}
    启用
    {{#  } else { }}
    停用
    {{# } }}
</script>


<script src="/src/js/comm.js"></script>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script>


    var layer;
    var table;
    var basePath;
    var vm;
    var tableColum;
    window.layinit(function (htConfig) {
        var _htConfig = htConfig;
        basePath = _htConfig.coreBasePath;
        uiBasePath = _htConfig.uiBasePath;
        vm = new Vue({
            el: '#app',
            data: {
                editSalary: false,
                loading: false,
                exporting: false,//导出标志位
                dictParamField: false,
                searchForm: {
                    typeId: '',  //类型ID
                    stationName: '', // 岗位名
                    stationPlace: '', // 工作地
                    startTime: '', // 开始时间
                    endTime: '', // 结束时间
                    state: '', // 状态
                },

            },

            methods: {
                //重载表格
                toLoading: function () {
                    if (table == null) {
                        return;
                    }
                    var self = this;
                    self.loading = true;
                    table.reload('listTable', {
                        where: {
                            typeId: self.searchForm.typeId, //关键字
                            stationName: self.searchForm.stationName,
                            stationPlace: self.searchForm.stationPlace,
                            startTime: self.searchForm.startTime,
                            endTime: self.searchForm.endTime,
                            state: self.searchForm.state
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                },
                ////  ----   单行操作界面显示  结束 -----------------
                init: function () {
                    var self = this;
                    //使用layerUI的表格组件
                    layui.use(['layer', 'table', 'ht_ajax', 'ht_auth', 'ht_config'], function () {
                        layer = layui.layer;
                        table = layui.table;
                        //执行渲染
                        table.render({
                            elem: '#listTable' //指定原始表格元素选择器（推荐id选择器）
                            , id: 'listTable'

                            , cols: [[
                                {
                                    type: 'numbers',
                                    title: '序号',
                                },
                                {
                                    field: 'typeName',
                                    title: '招聘类别'
                                },
                                {
                                    field: 'stationName',
                                    title: '岗位名称',
                                },
                                {
                                    field: 'stationPlace',
                                    title: '工作地点',
                                },
                                {
                                    field: 'time',
                                    title: '生效时间',
                                },
                                {
                                    field: 'state',
                                    title: '状态',
                                    templet: '#recruitstate'
                                },
                                {
                                    field: 'createName',
                                    title: '创建人',
                                },
                                {
                                    field: 'crateTime',
                                    title: '创建时间',
                                },
                                {
                                    fixed: 'right',
                                    title: '操作',
                                    width: 178,
                                    align: 'left',
                                    toolbar: '#barTools'
                                }
                            ]], //设置表头
                            url: basePath + 'recruit/recruitList',
                            page: true,
                            done: function (res, curr, count) {
                                //数据渲染完的回调。你可以借此做一些其它的操作
                                //如果是异步请求数据方式，res即为你接口返回的信息。
                                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                                self.loading = false;
                            }
                        });
                        table.on('tool(listTable)', function (obj) {
                            var selectedRowInfo = obj.data;
                            if (obj.event === 'edit') {
                                console.log("选择的行数据：", selectedRowInfo);
                                self.editRecruitInfo(selectedRowInfo.id);
                            }else if(obj.event === 'view'){
                                console.log("选择的行数据：", selectedRowInfo);
                                self.viewRecruitInfo(selectedRowInfo.id);
                            }

                        });
                    })
                },

                // 编辑字段
                editRecruitInfo: function (id) {
                    var self = this;
                    var eidturl = '/recruit/recruitEdit?id=' + id;
                    layer.open({
                        type: 2,
                        title: "编辑招聘",
                        maxmin: true,
                        area: ['80%', '80%'],
                        content: eidturl,
                        end: function () {
                            self.toLoading();
                        }
                    });


                },
                // 预览
                viewRecruitInfo: function (id) {
                    var self = this;
                    var viewurl = '/recruit/recruitView?id=' + id;
                    layer.open({
                        type: 2,
                        title: "预览",
                        maxmin: true,
                        area: ['80%', '80%'],
                        content: viewurl,
                        end: function () {

                        }
                    });


                },

                addRecruit: function () {
                    var self = this;
                    var url = '/recruit/recruitEdit';
                    layer.open({
                        type: 2,
                        title: "新增招聘",
                        maxmin: true,
                        area: ['80%', '80%'],
                        content: url,
                        end: function () {
                            self.toLoading();
                        }
                    });

                },

                getStartTime: function (starttime) {
                    this.searchForm.startTime = starttime;
                },
                getEndTime: function (endtime) {
                    this.searchForm.endTime = endtime;
                }

            },
            mounted: function () {
                this.init();
            }
        });
    });
    //


</script>

</body>
</html>